<template>
  <section class="content clear">
    <section class="content-search">
      <el-button size="mini" type="primary" @click="addCampus">添加校区</el-button>
    </section>
    <section class="content-list">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="校区序号" width="120">
          <!--<template slot-scope="scope">-->
            <!--<span v-if="!scope.row.type">{{scope.row.schoolIndex}}</span>-->
            <!--<el-input v-if="scope.row.type" size="mini" v-model="scope.row.schoolIndex" placeholder="请输入校区序号"></el-input>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column prop="name" label="校区名称" width="220">
          <template slot-scope="scope">
            <span v-if="!scope.row.type">{{scope.row.name}}</span>
            <el-input v-if="scope.row.type" size="mini" v-model="scope.row.name" placeholder="请输入校区名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="校区地址">
          <template slot-scope="scope">
            <span v-if="!scope.row.type">{{scope.row.address}}</span>
            <el-input v-if="scope.row.type" size="mini" v-model="scope.row.address" placeholder="请输入校区地址"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.type" @click="updateCampus(scope.row)" type="text" size="mini">修改</el-button>
            <el-button v-if="scope.row.type" @click="saveCampus(scope.row)" type="text" size="mini">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </section>
</template>

<script>
import { integrate } from '@/api/index'
export default {
  name: 'campus',
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.getCampusList()
  },
  methods: {
    checkSpecificKey (str) {
      var specialKey = '[`~!@#$^&*%()=|{}\':;\',\\\\[\\\\].<>/?~！#￥……&*（）——|{}【】‘；：""”“\'。，、？]‘\''
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) !== -1) {
          this.$message.error('不能出现特殊字符')
          return false
        }
      }
      return true
    },
    getCampusList () {
      integrate()._getCampusList().then((res) => {
        if (res.status) {
          this.tableData.length = 0
          for (let i = 0; i < res.data.length; i++) {
            this.tableData.push({
              id: res.data[i].id,
              address: res.data[i].address,
              name: res.data[i].name,
              type: false
            })
          }
        }
      })
    },
    checkType () {
      let tag = false
      this.tableData.some((item) => {
        if (item.type) {
          tag = true
        }
      })
      return tag
    },
    addCampus () {
      if (this.checkType()) {
        this.$message.error('请先保存')
      } else {
        this.tableData.push({
          name: '',
          address: '',
          type: true
        })
      }
    },
    updateCampus (val) {
      if (this.checkType()) {
        this.$message.error('请先保存')
      } else {
        val.type = true
      }
    },
    saveCampus (val) {
      if (this.checkSpecificKey(val.name) && this.checkSpecificKey(val.address)) {
        if (val.id) {
          let req = {
            id: val.id,
            address: val.address,
            name: val.name
          }
          integrate()._editCampus(req).then((res) => {
            if (res.status) {
              this.$message.success('修改校区成功')
              this.getCampusList()
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          let req = {
            address: val.address,
            name: val.name
          }
          integrate()._addCampus(req).then((res) => {
            if (res.status) {
              this.$message.success('新增校区成功')
              this.getCampusList()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      }
    }
  }
}
</script>
